<template>
    <div class="history">
        <div class="tips">请凭身份证和取货码，在可取货时间内完成口罩自提</div>
        <div class="history-list">
            <div class="form-item list" v-for="(item, index) in orderData" :key="index" @click="openDetail(item)">
                <div class="items">
                    <div class="label">预约人姓名</div>
                    <div class="content">
                        <div class="state" :class="infoState(item).class">{{infoState(item).name}}
                        </div>
                        {{item.name}}
                    </div>
                </div>
                <div class="items">
                    <div class="label">预约人身份证</div>
                    <div class="content">{{item.orderCard}}</div>
                </div>
                <div class="items">
                    <div class="label">下单时间</div>
                    <div class="content">{{item.orderTime}}</div>
                </div>
                <div class="items">
                    <div class="label">自提网点</div>
                    <div class="content">{{item.storeName}}</div>
                </div>
                <div class="items">
                    <div class="label">网点地址</div>
                    <div class="content">{{item.dotAddress}}</div>
                </div>
                <div class="items">
                    <div class="label">可取货时间</div>
<!--                    <div class="content">{{item.appointTime}}</div>-->
                    <div class="content" v-html="item.appointTime" style="white-space: pre-line;"></div>
                </div>
                <div class="items">
                    <div class="label">取货时间</div>
                    <div class="content">{{item.receiveTime || '-'}}</div>
                </div>
                <i class="el-icon-arrow-right ind"></i>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderData: []
            }
        },
        mounted() {
            this.getOrderData()
        },
        methods: {
            getOrderData() {
                this.$http.get('/orderRecord/getSelfOrderRecord').then(result => {
                    if (result.success) {
                        this.orderData = result.data
                    }
                })
            },
            openDetail(item) {
                this.$router.push({
                    path: '/history-detail',
                    query: {
                        id: item.id
                    }
                })
            },
            infoState(item) {
                let state = {
                    class: '',
                    status: null,
                    name: ''
                }
                if (item) {
                    if (Number(item.receiveStatus) === 2) {
                        state = {
                            status: 1,
                            class: 'finish',
                            name: '已取货'
                        }
                    } else {
                        if (Number(item.orderStatus) === 1) {
                            state = {
                                status: 2,
                                class: 'disable',
                                name: '已过期'
                            }
                        } else {
                            state = {
                                status: 0,
                                class: '',
                                name: '未取货'
                            }
                        }
                    }
                }
                return state
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .history {
        .tips {
            padding: .1rem .2rem;
            background-color: #fff;
            color: #e83131;
        }

        .history-list {
            .list {
                padding-right: .6rem;
                box-shadow: 0 0.02rem 0.06rem -.04rem #999;
                position: relative;
                margin-top: .15rem;

                &:last-child {
                    margin-bottom: 0;
                }

                .state {
                    float: right;
                    margin-right: -.4rem;
                    font-size: .24rem;
                    border: 1px solid #f2b75d;
                    color: #f2b75d;
                    padding: 0 .1rem;
                    line-height: .32rem;
                    height: .36rem;
                    margin-top: .02rem;

                    &.finish {
                        color: #00bf53;
                        border-color: #00bf53;
                    }

                    &.disable {
                        color: #999;
                        border-color: #999;
                    }
                }

                .ind {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: .48rem;
                    font-size: .36rem;
                    height: .4rem;
                    margin-top: -.2rem;
                    text-align: center;
                    font-weight: bolder;
                    color: #999;
                }
            }
        }
    }
</style>
